<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <title>Title</title>
</head>
<body>
<div align="center">
    <div style="width: 530px;height:150px;" class="layui-upload-drag" id="test1">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="test10">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
    </div>
    <br/>
    <button id="btn" class="layui-btn layui-btn-normal">设置头像</button>
</div>
</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var index = parent.layer.getFrameIndex(window.name);
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/user/userUploadImg' //上传接口
            ,accept: 'images' //允许上传的文件类型：图片
            ,size: 2048 //最大允许上传的文件大小
            ,drag: true
            ,auto:false
            ,bindAction:'#btn'
            ,
            //上传前的回调
            before: function () {
            }
            ,done: function(res){
                //上传完毕回调
                window.parent.location.reload();//刷新父页面
                parent.layer.close(index);
            }
            ,error: function(){
                //请求异常回调
                alert("上传异常");
            }
        });
    });
</script>
</html>